<template>
	<div id="mainBox">
		<el-container>
		      <el-header>
				  <ExpHeader :title="title" :musicUrl="musicurl"></ExpHeader>
			  </el-header>
		      <el-main>
				  <div id="MainBody">
					  <div id="ExpAside">
						  <div id="LogoCard" style="width: 100%;height: 30%;">
							  <LogoCard :materialurl="materialurl" :modelurl="modelurl" :scale="modelscale"></LogoCard>
						  </div>
						  <div style="width:100%;height:70%;">
							  <dv-border-box-11>
								  <div id="ButtonArea">
									  <MyButton  @click="updateChart()">北约组织</MyButton>
									  <MyButton  @click="wtoMap()">华约组织</MyButton>
									  <MyButton  @click="bipolarPatternMap()">两极格局</MyButton>
								  </div>
							  </dv-border-box-11>
						  </div>
					  </div>
					  <div id="ExpMid">
					   <div id="MapViewCard">
							<dv-border-box-10>
								<div ref="main" id="MapView"></div>
							</dv-border-box-10>
					   </div>
					   <div id="SubTitleCard">
					    <dv-border-box-8 :reverse="true">
							<div class="textBox" v-if="textStatus">
								<p class="mainTitle">1949年8月24日</p>
								<p class="secoundTitle">美国、英国等12国组建北约组织抵抗苏联</p>
							</div>
							<div class="textBox" v-if="wtoMapTextBoxStatus">
								<p class="mainTitle">1955年5月4日</p>
								<p class="secoundTitle">苏维埃社会主义共和国、德意志民主共和国等8国为对抗北约组织而成立华沙条约组织</p>
							</div>
							<div class="textBox" v-if="bipolarPatternStatus">
								<p class="mainTitle">1959年世界格局</p>
								<p class="secoundTitle">北约和华约两大军事政治集团的出现,标志着两极格局的形成</p>
							</div>
						</dv-border-box-8>
					   </div>
					  </div>
					  <div id="ExpRightSide">
						   <div id="CountryCard">
							 <dv-border-box-13>
								 <div id="countryBox" style="width:100%;height:100;display: flex;flex-direction: column;">
									<h1 style="text-align: center;margin:20px 0px;color: #F0F8FF;">成员国列表</h1>
								 	<LunboCard :mapdata="mapData" :isAll="isAll"></LunboCard>
								 </div>
							 </dv-border-box-13>
						   </div>
						   <div id="RankCard">
							 <dv-border-box-12>
								 
							 </dv-border-box-12>
						   </div>
					  </div>
				  </div>
			  </el-main>
		    </el-container>
	</div>
</template>

<script>
	import LogoCard  from "../../components/exphistory/3dLogoCard.vue"
	import ExpHeader from "../../components/exphistory/ExpHeader.vue"
	import LunboCard from "../../components/card/LunboCard.vue"
	import axios from 'axios';
	import * as echarts from 'echarts';
	import 'echarts-gl';
	import "../../assets/js/world.js";
	import MyButton from "../../components/button/BlueButton.vue";

	export default {
		mounted() {
			this.init3dMap()
			window.addEventListener('resize', this.screenAdapter)
			this.updateChart()
		},
		beforeDestroy() {
			this.chartMap.clear()
		},
		components: {
			ExpHeader,MyButton,LogoCard,LunboCard
		},
		data() {
			return {
				isAll:'',
				musicurl:"music/NatoAndWtoMapBg.mp3",
				materialurl:"model/nato/natoLogo/i.mtl",
				modelurl:"model/nato/natoLogo/i.obj",
				modelscale:0.01,
				title:"北约与华约",
				wtoMapTextBoxStatus:false,
				bipolarPatternStatus:false,
				flagStatus:false,
				textStatus: false,
				chartMapOption: null,
				mapData: []
			}
		},
		watch: {
			
		},
		methods: {
			wtoMap(){
				this.isAll = '';
				this.materialurl = "model/wto/logo/2.mtl";
				this.modelurl = 'model/wto/logo/2.obj';
				this.modelscale = 0.6;
				this.textStatus = false;
				this.bipolarPatternStatus = false;
				this.wtoMapTextBoxStatus = true;
				var tableData = [{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/USSR.png",
				    name:'苏维埃社会主义共和国联盟',
					date:'初始成员国',
					type:"1"
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/DDR.png",
					name:'德意志民主共和国',
					date:'初始成员国',
					type:"1"
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRL.png",
					name:'波兰人民共和国',
					date:'初始成员国',
					type:"1"
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/CSSR.png",
					name:'捷克斯洛伐克社会主义共和国',
					date:'初始成员国',
					type:"1"
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRH.png",
					name:'匈牙利人民共和国',
					date:'初始成员国',
					type:"1"
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/SRR.png",
					name:'罗马尼亚社会主义共和国',
					date:'初始成员国',
					type:"1"
				},{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRB.png",
					name:'保加利亚人民共和国',
					date:'初始成员国',
					type:"1"
				},{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/RPSS.png",
					name:'阿尔巴尼亚人民共和国',
					date:'初始成员国',
					type:"1"
				}
			]
				this.mapData = tableData
				var wtoMapData = [
					{
						"name":"Soviet Union",
						"value":"15"
					},
					{
						"name":"Germany",
						"value":"15"
					},
					{
						"name":"Poland",
						"value":"15"
					},
					{
						"name":"Czech Rep.",
						"value":"15"
					},
					{
						"name":"Hungary",
						"value":"15"
					},
					{
						"name":"Romania",
						"value":"15"
					},
					{
						"name":"Bulgaria",
						"value":"15"
					},
					{
						"name":"Albania",
						"value":"15"
					},
					{
						"name":"Ukraine",
						"value":"15"
					},
					{
						"name":"Ukraine",
						"value":"15"
					},
					{
						"name":"Belarus",
						"value":"15"
					},
					{
						"name":"Uzbekistan",
						"value":"15"
					},
					{
						"name":"Kazakhstan",
						"value":"15"
					},
					{
						"name":"Estonia",
						"value":"15"
					},
					{
						"name":"Latvia",
						"value":"15"
					},
					{
						"name":"Lithuania",
						"value":"15"
					},
					{
						"name":"Moldova",
						"value":"15"
					},
					{
						"name":"Slovakia",
						"value":"15"
					}
				]
				this.chartMapOption.series[0].data = wtoMapData
				this.chartMap.setOption(this.chartMapOption);
				
			},
			bipolarPatternMap(){
				this.isAll = 1;
				this.flagStatus = false;
				this.textStatus = false;
				this.wtoMapTextBoxStatus = false;
				this.bipolarPatternStatus=true;
				var allMapData = [
						{
							"name":"Soviet Union",
							"value":"15"
						},
						{
							"name":"Germany",
							"value":"15"
						},
						{
							"name":"Poland",
							"value":"15"
						},
						{
							"name":"Czech Rep.",
							"value":"15"
						},
						{
							"name":"Hungary",
							"value":"15"
						},
						{
							"name":"Romania",
							"value":"15"
						},
						{
							"name":"Bulgaria",
							"value":"15"
						},
						{
							"name":"Albania",
							"value":"15"
						},
						{
							"name":"Ukraine",
							"value":"15"
						},
						{
							"name":"Ukraine",
							"value":"15"
						},
						{
							"name":"Belarus",
							"value":"15"
						},
						{
							"name":"Uzbekistan",
							"value":"15"
						},
						{
							"name":"Kazakhstan",
							"value":"15"
						},
						{
							"name":"Estonia",
							"value":"15"
						},
						{
							"name":"Latvia",
							"value":"15"
						},
						{
							"name":"Lithuania",
							"value":"15"
						},
						{
							"name":"Moldova",
							"value":"15"
						},
						{
							"name":"Slovakia",
							"value":"15"
						},
						{
						"name": "United States",
						"value": "0.19"
					},
					{
						"name": "Canada",
						"value": "0.19"
					},
					{
						"name": "Belgium",
						"value": "0.19"
					},
					{
						"name": "France",
						"value": "0.19"
					},
					{
						"name": "Luxembourg",
						"value": "0.19"
					},
					{
						"name": "Netherlands",
						"value": "0.19"
					},
					{
						"name": "United Kingdom",
						"value": "0.19"
					},
					{
						"name": "Denmark",
						"value": "0.19"
					},
					{
						"name": "Norway",
						"value": "0.19"
					},
					{
						"name": "Iceland",
						"value": "0.19"
					},
					{
						"name": "Portugal",
						"value": "0.19"
					},
					{
						"name": "Italy",
						"value": "0.19"
					}
				]
				
				var data = [
					
						{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/United States.png",
							name:'美国',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Canada.png",
							name:'加拿大',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Belgium.png",
							name:'比利时',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/France.png",
							name:'法国',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Luxembourg.png",
							name:'卢森堡',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Netherlands.png",
							name:'荷兰',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/United Kingdom.png",
							name:'英国',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Denmark.png",
							name:'丹麦',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Norway.png",
							name:'挪威',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Iceland.png",
							name:'冰岛',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Portugal.png",
							name:'葡萄牙',
							date:'初始成员国',
							type:"0"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Italy.png",
							name:'意大利',
							date:'初始成员国',
							type:"0"
						},
						{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/USSR.png",
							name:'苏维埃社会主义共和国联盟',
							date:'初始成员国',
							type:"1"
						},
						{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/DDR.png",
							name:'德意志民主共和国',
							date:'初始成员国',
							type:"1"
						},
						{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRL.png",
							name:'波兰人民共和国',
							date:'初始成员国',
							type:"1"
						},
						{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/CSSR.png",
							name:'捷克斯洛伐克社会主义共和国',
							date:'初始成员国',
							type:"1"
						},
						{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRH.png",
							name:'匈牙利人民共和国',
							date:'初始成员国',
							type:"1"
						},
						{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/SRR.png",
							name:'罗马尼亚社会主义共和国',
							date:'初始成员国',
							type:"1"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRB.png",
							name:'保加利亚人民共和国',
							date:'初始成员国',
							type:"1"
						},{
							src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/RPSS.png",
							name:'阿尔巴尼亚人民共和国',
							date:'初始成员国',
							type:"1"
						}
				]
				this.mapData = data ; 
				this.chartMapOption.series[0].data = allMapData
				this.chartMap.setOption(this.chartMapOption);
				
			},
			//更新数据
			updateChart() {
				this.isAll = '';
				this.materialurl = "model/nato/natoLogo/i.mtl";
				this.modelurl = 'model/nato/natoLogo/i.obj';
				this.modelscale = 0.01;
				var natoData = [{
						"name": "United States",
						"value": "0.19"
					},
					{
						"name": "Canada",
						"value": "0.19"
					},
					{
						"name": "Belgium",
						"value": "0.19"
					},
					{
						"name": "France",
						"value": "0.19"
					},
					{
						"name": "Luxembourg",
						"value": "0.19"
					},
					{
						"name": "Netherlands",
						"value": "0.19"
					},
					{
						"name": "United Kingdom",
						"value": "0.19"
					},
					{
						"name": "Denmark",
						"value": "0.19"
					},
					{
						"name": "Norway",
						"value": "0.19"
					},
					{
						"name": "Iceland",
						"value": "0.19"
					},
					{
						"name": "Portugal",
						"value": "0.19"
					},
					{
						"name": "Italy",
						"value": "0.19"
					},
				]
				var wtoTableData = [
					{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/United States.png",
						name:'美国',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Canada.png",
						name:'加拿大',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Belgium.png",
						name:'比利时',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/France.png",
						name:'法国',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Luxembourg.png",
						name:'卢森堡',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Netherlands.png",
						name:'荷兰',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/United Kingdom.png",
						name:'英国',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Denmark.png",
						name:'丹麦',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Norway.png",
						name:'挪威',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Iceland.png",
						name:'冰岛',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Portugal.png",
						name:'葡萄牙',
						date:'初始成员国',
						type:"0"
					},{
						src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/Italy.png",
						name:'意大利',
						date:'初始成员国',
						type:"0"
					}
				]
				this.mapData = wtoTableData
				this.flagStatus = true;
				this.textStatus = true;
				this.wtoMapTextBoxStatus = false;
				this.bipolarPatternStatus = false;
				
				this.chartMapOption.series[0].data = natoData;
				this.chartMap.setOption(this.chartMapOption);
			},
			//屏幕自适应
			screenAdapter() {
				const adapterOption = {};
				this.chartMap.setOption(adapterOption);
				this.chartMap.resize();
			},
			goRouter(url) {
				this.$router.push({
					path: url
				})
			},
			init3dMap() {
				var chartDom = this.$refs.main;
				this.chartMap = echarts.init(chartDom);
				this.chartMapOption = {
					series: [
						{
								map: 'world',
								type:'map3D',
								data: this.WtoMapData,
								viewControl: {
									alpha: 80,
									distance: 80,
									panMouseButton: 'left',
									rotateMouseButton: 'right'
								},
								postEffect: {
									bloom: {
										enable: true
									}
								},
								main: {
									intensity: 1,
									shadow: true,
									alpha: 150,
									beta: 70
								},
								itemStyle: {
									borderWidth: 1,
									borderColor: "#333",
									opacity:0.5
								}
							
						}
					],
					visualMap: {
						show: false,
						min: 0,
						max: 15,
						inRange: {
							color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090',
								'#fdae61', '#f46d43', '#d73027', '#a50026'
							]
						}
					}

				};
				this.chartMap.setOption(this.chartMapOption);
			}
		}
	}
</script>

<style scoped="scoped">
	#mainBox{
		display: flex;
		flex-flow: column;
		height: 100%;
		width: 100%;
		background-image: url(../../../public/img/component/bg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	#MainBody{
		display: flex;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	#ExpAside{
		display: flex;
		flex-flow: column;
		width:300px;
		overflow: hidden;
		margin: 10px;
	}
		#ButtonArea{
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	#ExpMid{
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 10px 0px;
	}
	
		#MapViewCard{
			display: flex;
			flex: 1;
			width: 100%;
			margin-bottom: 10px;
		}
			#MapView{
				display: flex;
				height: 100%;
			}
			
			#SubTitleCard{
				height: 200px;
				width: 100%;
			}
	
	#ExpRightSide{
		display: flex;
		width: 500px;
		flex-direction: column;
		margin: 10px;
	}
	 #CountryCard{
		 height: 50%;
	 }
	 
	 #RankCard{
		flex: 1;
	 }
	
	

	.textBox {
		position: absolute;
		text-align: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: rgba(0, 0, 0, 0.5);
		color: #ffffff;
		padding: 10px;
		width: 60%;
		-webkit-animation: fadi 5s 1
	}

	.mainTitle {
		font-size: 40px;
	}

	.secoundTitle {
		font-size: 30px;
	}

	@-webkit-keyframes fadi {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
	
	:deep(.el-header) {
	  padding: 0;
	}
</style>
